<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-11-06 19:30:15
 * @LastEditors: Please set LastEditors
 -->
<template>
  <view class="login-page">
    <view class="contain">
          <view class="login-box">
            <!-- <view class="header">
                <image
                  src="../static/images/login-logo.png"
                  mode="scaleToFill"
                  lazy-load="false">
                </image>   
            </view> -->
            <view class="content">
              <view class="account item">
                  <view class="label">
                      <image src="../static/images/icon_account.png" mode="scaleToFill"
                        lazy-load="false">
                      </image>
                  </view>
                  <view class="fill">
                    <input type="number"  placeholder="请输入手机号码" maxlength="11" @input="getPhoneNum" placeholder-style="color:#ffffff">
                  </view>
              </view>
              <view class="password item">
                <div class="lf">
                  <view class="label">
                      <image src="../static/images/icon_password.png" mode="scaleToFill"
                        lazy-load="false">
                      </image>
                  </view>
                  <view class="fill">
                    <input type="number" placeholder="请输入验证码"  @input="getCode" maxlength="6" placeholder-style="color:#ffffff">
                  </view>
                </div>
                  <view class="get-code">
                    <view class="get-code-text" @click="getVerifyCode" v-if="countDown==''">获取验证码</view>
                    <view class="get-code-text" v-else>{{countDown}}</view>
                  </view>
              </view>
            </view>
            <view class="login-btn" @click="login">登录</view>
            <!-- <view class="forget-password">
                忘记密码
            </view> -->
        </view>
    </view>

  </view>
</template>
<script>
import Vue from "vue"
import InterServer from "@/common/config/server"
import {localStorageSyncServer} from "@/common/js/common"
let intervaler = null;
export default {
  data(){
    return{
        phoneNum:"", //手机号
        code:"",  //验证码
        countDown:"", //倒计时
    }
  },
  onShow(){
    // #ifdef H5
        document.title=`登录`
    // #endif
  },
  onHide(){
     //clearInterval(intervaler);
  },
  onUnload(){
    clearInterval(intervaler);
  },

  methods:{
  //获取手机号
    getPhoneNum(e){
        this.phoneNum=e.detail.value
    }, 
    getCode(e){
      console.log(e)
      this.code=e.detail.value
    },

    // 获取验证码
    getVerifyCode() {
      let phoneNum = this.phoneNum;
      if (phoneNum=="" || phoneNum.length!==11) {
        return Vue.showCustomToast("请输入手机号")
      }
      InterServer.sendSmsCheckCode({
        "mobile": phoneNum
      }).then(res=>{
        if(res.code==200){
          this.intervalerRun();
         // Vue.showCustomToast(res.message)
        }
      })
    },
    //校验验证码
    checkMessageCode(){
			console.log(this.code)
      return new Promise((resolve, reject) => {
        InterServer.checkMessageCode({
          "checkCode": this.code
          }).then(res=>{
            if(res.code==200){
              resolve(true, "done")
            }else{
              Vue.showCustomToast("验证码错误")
            }
          })
      })
    },
    // 倒计时
    intervalerRun() {
      this.countDown= "60s"
        intervaler = setInterval(() => {
          let temp = this.countDown.toString().replace(/[^0-9]/g, "") - 1;
          if (temp === 0) {
            clearInterval(intervaler);
            this.countDown= ""
            return;
          }
          this.countDown=temp + "s"
        }, 1000)

    },
    //登录
    login(){
       let phoneNum = this.phoneNum;
       let code=this.code
       if (phoneNum=="" || phoneNum.length!==11) {
        return Vue.showCustomToast("请输入手机号")
       }
       if (code=="" || code.length!==6) {
        return Vue.showCustomToast("请输验证码")
       }
       if(this.countDown==""){
        return Vue.showCustomToast("请获取验证码")
       }
			console.log("开始接受")
      //this.checkMessageCode().then(res=>{
				console.log("短信验证成；开始登陆")
        InterServer.login({
          "checkMobile": phoneNum,
          "checkCode":code
        }).then(res=>{
          if(res.code==200){
             //let userInfo=`${phoneNum}${code}`;
             Vue.globalData.userInfo.userInfoId=res.data.id
             Vue.globalData.userInfo.image=res.data.image
             localStorageSyncServer.set("Token", res.message); //自定义userInfo
             localStorageSyncServer.set("userInfoId", res.data.id); //自定义userInfo
             localStorageSyncServer.set("userInfo", res.data); //自定义userInfo
             localStorageSyncServer.set("mobile", phoneNum); //自定义userInfo
              localStorageSyncServer.set("image", res.data.image); //自定义userInfo
             Vue.customNavigateBack()
          }
        })
     // })
     }
  }
};
</script>
<style lang="less" scoped>
page {
  width: 100%;
  height: 100%;
  background:blue;
}
.login-page {
  width: 100%;
  height:100vh;
  background: url("../static/images/login-bg.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  .contain{
    width: 100%;
     height: 100%;
    background:rgba(59,59,59,0.5);
    overflow: hidden;
    .login-box {
    width: 675upx;
    height: 1046upx;
    margin: 100upx auto 0;
    overflow: hidden;
    .header{
         width:301upx;
         height: 92upx;
         margin:118upx auto 168upx;
         image{
            width:282upx;
            height: 88upx;
        }
    }
    .content{
        .item{
            display: flex;
            width:460upx;
            height:50upx;
            margin: 0 auto 83upx;
            position: relative;
            align-items: center;
            &:first-child{
            border-bottom: 1upx solid #ffffff;
            }
            .label{
                padding:0 48upx 0 17upx;
                 image{
                    width: 28upx;
                    height: 28upx;
                }
            }
            input{
                height: 40upx;
                line-height: 40upx;
                font-size:28upx;
                color:#ffffff;
                .placeholder-text{
                  font-size:28upx;
                  height: 40upx;
                  line-height: 40upx;
                  font-family:PingFangSC-Regular;
                  font-weight:400;
                  color:#ffffff;
              }
            }
           
              .get-code{
                height: 44upx;
                text-align: center;
                color: #ffffff;
                line-height: 44upx;
                border-radius: 10upx;
                font-size: 28upx;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 999;
                border-radius: 42upx;
                font-size:28upx;
                font-family:PingFangSC-Regular;
                font-weight:400;
                display: flex;
                justify-content: space-between;
                align-items: center; 
                &-text{
                width:172upx;
                display: block;
                height:44upx;
                line-height: 44upx;
                font-size:30upx;
                font-family:PingFang-Semibold;
                font-weight:bold;
                color:rgba(50,50,50,1);
                margin-left: 17upx;
                background:rgba(255,255,255,1);
                box-shadow:0px 2px 4px rgba(125,191,249,0.35);
                border-radius:22upx;
              
              }
            }
            .line{
              width:1upx;
              height:40upx;
              background:rgba(214,214,214,1);
            }
        } 
        .password{
              .lf{
                display: flex;
                width: 271upx;
                border-bottom: 1upx solid #ffffff;
              }
        }
    }
    .login-btn{
        margin: 0 auto;
        margin-top: 123upx;
        font-size:36upx;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 58upx;
        width:512upx;
        height:58upx;
        background:rgba(0,136,255,1);
        box-shadow:0upx 6upx 6upx rgba(1,75,132,0.52);
        border-radius:29upx;
    }
    .forget-password{
        font-size:30upx;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(35,106,246,1);
        line-height:30upx;
        text-align: center;
        margin-top: 116upx;
    }
  }
  }
  
  
}
</style>
